<template>
	<view class="">
		<view class="headerMain"></view>
		<view class="content">
			<view class="box">
				<view class="hotShop">
					<view class="hotShop-item">
						<view class="titleBox">
							<view class="title">爆款商品</view>
							<view class="tips">买！买！买！</view>
						</view>
						<!-- 珠子掉落 -->
						<view class="grainBox">
							<view class="grainItem grainItem_1">
								<image class="grain_1" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_2">
								<image class="grain_2" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_3">
								<image class="grain_3" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_4">
								<image class="grain_4" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_5">
								<image class="grain_5" src="@/static/index/grain.png" mode=""></image>
							</view>
						</view>
						<image class="hotBg" src="@/static/index/hotBg.png" mode=""></image>
						<!-- 猴子 -->
							<view class="imgBox_1" v-if="show_1 == true">
								<image class="monkey_1" src="@/static/index/monkey.png" mode=""></image>
							</view>
							<view class="imgBox_2" v-if="show_2 == true">
								<image class="monkey_2" src="@/static/index/monkey.png" mode=""></image>
							</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				times: 0,
				num: 1,
				show_1: true,
				show_2: false,
			}
		},
		onLoad() {
			
		},
		onHide() {
			console.log("onHide：",this.times);
			if(this.times) {  
				clearInterval(this.times);  
				clearTimeout(this.times);  
				this.times = null; 
			}  
		},
		onUnload() {
			console.log("onUnload：",this.times);
			if(this.times) {  //在页面卸载时清除定时器有时会清除不了，可在页面跳转时清除
				clearTimeout(this.times);  
				this.times = null;  
			}  
		},
		onShow() {
			this.times = setInterval(() => {
				// console.log("执行");
				if(this.show_1 == true){
					this.show_1 = false;
					this.show_2 = true;
				}else{
					this.show_1 = true;
					this.show_2 = false;
				}
			}, 1500);
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F2F2F2;
	}
	.content {
		padding: 50rpx 0;
	}
	
	.box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		.otherBox{
			width: 49.5%;
		}
		.hotShop{
			width: 49.5%;
			position: relative;
			&-item{
				background: linear-gradient(160deg, #F3EBD5 0%, #CEAC7A 78%);
				border-radius: 12rpx;
				padding: 65rpx 0 0 50rpx;
				height: 340rpx;
				overflow: hidden;
				position: relative;
				.titleBox{
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					.title{
						font-size: 32rpx;
						color: #000;
						font-weight: bold;
					}
					.tips{
						font-size: 28rpx;
						color: #000;
						margin-top: 10rpx;
					}
				}
				.grainBox{
					position: absolute;
					left: 0;right: 0;
					top: 0;
					display: block;
					width: 100%;
					height: 100%;
					overflow: hidden;
					// background: green;
					.grainItem{
						display: block;
						width: 100%;
						height: 110%;
						position: absolute;
						left: 0;right: 0;
						top: -50rpx;
						z-index: 8;
					}
					.grainItem_1{
						margin: auto;
						text-align: center;
						animation: upDwon 1.5s ease-in-out 0s infinite forwards;
					}
					.grain_1{
						width: 26rpx;
						height: 26rpx;
					}
					.grainItem_2{
						padding-left: 50rpx;
						animation: upDwon 1.5s ease-in-out 0.2s infinite backwards;
					}
					.grain_2{
						width: 20rpx;
						height: 20rpx;
					}
					.grainItem_3{
						margin: auto;
						text-align: center;
						animation: upDwon 1.5s ease-in-out 0.5s infinite backwards;
					}
					.grain_3{
						width: 20rpx;
						height: 20rpx;
					}
					.grainItem_4{
						padding-left: 250rpx;
						animation: upDwon 1.5s ease-in-out 0.9s infinite backwards;
					}
					.grain_4{
						width: 28rpx;
						height: 28rpx;
					}
					.grainItem_5{
						padding-left: 180rpx;
						animation: upDwon 1.5s linear 1.5s infinite backwards;
					}
					.grain_5{
						width: 20rpx;
						height: 20rpx;
					}
					.grainItem_6{
						padding-left: 190rpx;
						animation: upDwon 1.5s linear 2s infinite backwards;
					}
					.grain_6{
						width: 20rpx;
						height: 20rpx;
					}
					.grainItem_7{
						padding-left: 20rpx;
						animation: upDwon 1.5s linear 2.5s infinite forwards;
					}
					.grain_7{
						width: 28rpx;
						height: 28rpx;
					}
				}
				
				@keyframes upDwon {
				  0% {
				    transform: translateY(0);
				  }
				  100% {
				    transform: translateY(100%);
				  }
				}
				
				@-webkit-keyframes upDwon {
				  0% {
				    transform: translateY(0);
				  }
				  100% {
				    transform: translateY(100%);
				  }
				}
				
				.hotBg{
					position: absolute;
					left: 0;right: 0;
					bottom: -85rpx;
					margin: auto;
					z-index: 1;
					width: 65%;
					height: 270rpx;
				}
				
				.imgBox_1{
					width: 100%;
					height: 50%;
					// background: pink;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 9;
					.monkey_1{
						position: absolute;
						right: -45rpx;
						bottom: -65rpx;
						width: 175rpx;
						height: 175rpx;
						// 名称  需要多少秒或毫秒完成  动画将如何完成一个周期  
						// 动画在启动前的延迟间隔
						// 播放次数 是否应该轮流反向播放动画
						animation: 	move 1.5s 1 0s none;
						animation-iteration-count:infinite;
					}
					@keyframes move {
						from {
							-webkit-transform: translateX(0);
							transform: translateX(0);
						}
						to {
							-webkit-transform: translateX(-138%);
							transform: translateX(-138%);
						}
					}
					@-webkit-keyframes move {
						from {
							-webkit-transform: translateX(0);
							transform: translateX(0);
						}
						to {
							-webkit-transform: translateX(-138%);
							transform: translateX(-138%);
						}
					}
				}
				
				.imgBox_2{
					width: 100%;
					height: 50%;
					// background: pink;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 9;
					transform: rotateY(180deg); /* 反转方向为负角度45度 */
					transform-origin: 0 100%; /* 设置旋转中心为图片的中心点，高度为宽度的一半 */
					.monkey_2{
						position: absolute;
						left: -130rpx;
						bottom: -65rpx;
						width: 175rpx;
						height: 175rpx;
						// 名称  需要多少秒或毫秒完成  动画将如何完成一个周期  
						// 动画在启动前的延迟间隔
						// 播放次数 是否应该轮流反向播放动画
						animation: 	move2 1.5s 1 0s none;
						animation-iteration-count:infinite;
					}
					@keyframes move2 {
						from {
							-webkit-transform: translateX(0%);
							transform: translateX(0%);
						}
						to {
							-webkit-transform: translateX(-138%);
							transform: translateX(-138%);
						}
					}
					@-webkit-keyframes move2 {
						from {
							-webkit-transform: translateX(0%);
							transform: translateX(0%);
						}
						to {
							-webkit-transform: translateX(-138%);
							transform: translateX(-138%);
						}
					}	
				}
				
			}
		}
	}
	
	
</style>